<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom</title>
	</head>
	<style type="text/css">
		.myclass{
			background: pink;
		}
		.myclass2{
			background: blue;
		}
	</style>
	<body>
		<div id="ww" style="color: red;font-size: 20px;"class="myclass" >
			我是王五
		</div>
		<div id=zs class="myclass">
			<span >234213</span>
			我是张三
		</div>
		<div id=ls>
			我是李四
		</div>
		<button onclick=changeColor()>
			变绿色
		</button>
		<button onclick=removeColor()>
			取消颜色
		</button>
		
		<input type="" name="username" id="username" value="" />
		<button onclick="getValue()">获取值</button>
	</body>
	<script type="text/javascript">
		
		function getValue(){
			let oInput=document.getElementById('username')
			alert(oInput.value)
		}
		
		
		
		
//		//带标签对象//document网页 Element节点
//		console.dir(document.documentElement.innerHTML)
//		//不带标签对象
//		console.dir(document.documentElement.innerText)
		
		//1 childNodes获取孩子节点  数组，前一个获取body节点，后一个获取body里的div节点
		//2 parentNode获取父亲节点 单个对象
		//3 firstChild获取第一个子节点
		//4 lastChild获取最后一个子节点
		//5 nextSibling获取下一个兄弟（平级）节点
		//6 previousSibling获取前一个兄弟节点
		//console.dir(document.documentElement.childNodes[2].childNodes[1])//1
		//获取div
		let myDiv=document.documentElement.childNodes[2].childNodes[1]
		let myBody=myDiv.parentNode//2
		//console.dir(myDiv)
		//console.dir(myBody.firstChild)//3  //得到#text
		//console.dir(myBody.lastChild)//4  //得到script
		//获取张三对象
		let zhangsan=myDiv.nextSibling.nextSibling//5
		//console.dir(zhangsan.innerText)
		//获取王五对象
		let wangwu=zhangsan.previousSibling.previousSibling//6
		//获取对象属性值
		console.dir(wangwu.getAttribute("style"))
		//setAttribute('name','value')设置对象属性值
		console.dir(wangwu.getAttribute("style"))

		//getElementById('id')返回一个对象
		wangwu=document.getElementById('ww')
		let lisi=document.getElementById('ls')
		console.dir(lisi)
		
		function changeColor(){
			//wangwu.setAttribute("style","color:green")//方法一
			wangwu.style.color='green'
			wangwu.style.fontSize='50px'
			wangwu.className='myclass2'
			
		}
		//移除对象属性值
		function removeColor(){
			//wangwu.removeAttribute('style')//方法一
			wangwu.style.display='none'
		}
		
		
		//getElementsByClassName('className')返回的是列表
		let wangwuClass=document.getElementsByClassName("myclass")
		console.dir(wangwuClass[0])
		
		//getElementsByTagName('TagName')
		let wangwuSpan=document.getElementsByTagName('234213')
		console.dir(wangwuSpan)
		
	</script>
</html>
